<template>
    <div
        id="fileDownloadDom"
        class="fileDownload-main"
        @click="eStopPropagation($event)"
    >

        <transition
            v-for="(item, index) in fileDownloadAnimation"
            :key="`ani_${index}`"
            v-on:before-enter="fileAniBeforeEnter($event, index)"
            v-on:enter="fileAniEnter"
            v-on:leave="fileAniLeave"
            v-bind:css="false"
        >
        <div
            class="fileDownload-main-file"
            v-if="item.status"
        >
            <vi-icon type="file-text" class="fileDownload-main-file-icon"></vi-icon>
        </div>
        </transition>

        <div
            class="fileDownload-list"
            v-show="fileDownloadVisible"
        >
            <!-- 导出任务 -->
            <div
                class="fileDownload-list-item"
                v-for="item in showList"
                v-if="showList.length"
                :key="item.id"
                @click="fileDownloadClick( $event, 'open', item.id)"
            >
                <div
                    class="fileDownload-list-item-name ell"
                    :title="item.fileName"
                >
                    {{item.fileName}}
                </div>

                <div
                    class="fileDownload-list-item-content"
                >
                    <vi-progress
                        class="fileDownload-list-item-content-progress"
                        :percent="item.progress"
                        :showInfo="false"
                        strokeColor="#405dbd"
                        type="line"
                    ></vi-progress>
                    <div
                        class="fileDownload-list-item-content-dec ell"
                    >
                    {{(item.status===0?'准备中...':(
                            item.status===1?`${item.currentMemory}/${item.memory}`:(
                                item.status===2?`${item.memory}/${item.memory}`:(
                                    item.status===3?'导出失败':null
                                )
                            )
                        )
                    )}}
                    </div>
                </div>

                <vi-icon
                    type="close"
                    class="fileDownload-list-item-del"
                    @click="fileDownloadClick( $event, 'del', item.id)"
                ></vi-icon>

            </div>

            <div
                class="fileDownload-list-none"
                v-show="!showList.length"
            >
                <img class="color-filter" src="../../assets/image/fileDown_none.png" alt="暂无导出记录">
            </div>

        </div>

        <div
            class="fileDownload-btn"
            :class="{
                'fileDownload-btn': true,
                'fileDownload-btn-selected': fileDownloadVisible,
            }"
            @click="fileDownloadVisibleChange"
            v-show="!previewStatus"
        >
            <vi-icon
                type="arrow-down"
                :class="{
                    'fileDownload-btn-icon': true,
                    'fileDownload-btn-icon-ani': downloadActice,
                }"
            ></vi-icon>

            <div class="fileDownload-btn-line"></div>

            <span
                class="fileDownload-btn-num"
            >
                {{showList.length>999?'1K+':showList.length}}
            </span>

        </div>

    </div>
</template>

<script>
import activeShowMinxin from '../../mixin/activeShow.mixin';
import _ from 'lodash';

export default {
    name: "fileDownload",
    mixins: [activeShowMinxin],
    data () {
        return {
            delArray: [], // 记录删除的id
            downloadActice: false, // 当前是否有文件正在导出
            clickStatus: true, // 一秒内只能打开一个文件夹。
        };
    },
    mounted () {
    },
    methods:{
        // 展开列表
        fileDownloadVisibleChange() {
            this.setFileDownloadVisible( !this.fileDownloadVisible );
        },
        // 操作文件列表
        fileDownloadClick(event, type, id ){
            event.stopPropagation();
            // console.log('fileDownloadClick', type, id );
            // 删除
            if(type === 'del'){
                let array = _.cloneDeep(this.delArray);
                if( _.indexOf( array, id) === -1 ){
                    array.push(id);
                    this.delArray = array;
                }
                //

                this.fileDownloadList.map( v=>{
                    // 任何文件都能删除
                    if( v.id === id ){
                        let pay = {
                            code: 10,
                            cmd: "Del_file_download",
                            param: {
                                id: v.id,
                                taskId: v.taskId,
                                fileIds: v.fileIds,
                                exportFormat: v.exportFormat,
                                isCompress: v.isCompress,
                                fileName: v.fileName,
                            },
                        };

                        this.$webSC.webSCAsync(pay).then(res =>{
                            console.log( 'Del_file_download', pay, res);
                            if(res)
                            if(res.cmd !== 'Del_file_download'){return}

                            if( res.status == 200 ){

                            }

                        });
                        //

                    }
                    //
                } )
                //

            }
            //
            else if(type === 'open'){
                if( !this.clickStatus ){
                    return
                }

                this.clickStatus = false;
                setTimeout(() => {
                    this.clickStatus = true;
                }, 1000);


                this.fileDownloadList.map( v=>{
                    // 只有成功才能打开文件
                    if( (v.status === 2) && v.id === id ){
                        let pay = {
                            code: 9,
                            cmd: "Open_folder",
                            param: {
                                id: v.id,
                                taskId: v.taskId,
                                fileIds: v.fileIds,
                                exportFormat: v.exportFormat,
                                isCompress: v.isCompress,
                                fileName: v.fileName,
                            },
                        };

                        this.$webSC.webSCAsync(pay).then(res =>{
                            // console.log( 'Open_folder', pay, res);
                            if(res)
                            if(res.cmd !== 'Open_folder')return

                            if( res.status == 200 ){

                            }

                        });
                        //

                    }
                    //
                    else if( ( v.status !== 2 ) && v.id === id  ){
                        this.$message.warning(`文件${v.status===0?'准备中':(v.status===1?'导出中':'导出失败')}！`);
                    }
                    //

                } )
                //
            }

        },
        // 动画准备阶段，设置起点位置
        fileAniBeforeEnter: function (el, index) {
            // console.log( 'fileAniBeforeEnter', this.fileDownloadAnimation, el, index );
            el.style.top = this.fileDownloadAnimation[index].startTop;
            el.style.left = this.fileDownloadAnimation[index].startLeft;
        },
        // 动画执行过程，
        fileAniEnter: function (el, done) {
            Velocity(el, { top: '0px', left: '12px' }, { duration: 1500 }, { easing: "easeInSine" }, { complete: done });

            if(this.fileDownloadAnimation.length > 10){
                setTimeout(() => {
                    this.fileDownloadAnimationChange();
                }, 1500);
            }
            //
        },
        // 动画取消过程 消失
        fileAniLeave: function (el, done) {
            Velocity(el, { top: '0px', left: '12px' }, { duration: 100 }, { complete: done });
        },
        // 关闭导出动画
        fileDownloadAnimationChange(){
            // console.log( 'fileDownloadAnimationChange', this.fileDownloadAnimation, );
            let objAnimation = _.cloneDeep(this.fileDownloadAnimation);
            objAnimation = objAnimation.filter( (v)=> {return !v.status } );
            this.setFileDownloadAnimation(objAnimation);
        },
        // 阻止冒泡
        eStopPropagation(event) {
            event.stopPropagation();
        },
    },
    watch: {
    },
    computed: {
        fileDownloadVisible() {
            return this.$store.state.status.fileDownloadVisible;
        },
        fileDownloadList() {
            return this.$store.state.status.fileDownloadList;
        },
        // 最终的真实渲染数组 1.过滤删除的任务 2.确定正在导出的任务
        showList(){
            let array = [];
            if(this.fileDownloadList.length > 0 ){
                this.fileDownloadList.map( v => {
                    if( _.indexOf(this.delArray, v.id) === -1 ){
                        array.push(v);
                    }
                    //

                } )
                //
            }
            //

            if(array.length > 0){
                let array0 = [];
                array.map( (v) =>{
                    // 正在准备 和 正在导出 的文件不能动
                    if( v.fileIds !== '' &&
                        ( v.status === 0 || v.status === 1 )
                    ){
                        v.fileIds.split(',').map( val =>{
                            if( _.indexOf(array0, val) === -1 ){
                                array0.push(val);
                            }
                        } )
                        //

                    }
                    //

                } )
                //

                this.setFileDownloadfileIds(array0);

                let array1 = array;
                array1 = array1.filter( (v) => {return (v.status === 0 || v.status === 1)} );
                if(array1.length === 0){
                    this.downloadActice = false;
                }
                else{
                    this.downloadActice = true;
                }
            }
            //
            else{
                this.downloadActice = false;
                this.setFileDownloadfileIds([]);
            }

            return array;
        },
        // 导出的动画
        fileDownloadAnimation(){
            return this.$store.state.status.fileDownloadAnimation;
        },
        previewStatus() {
          return this.$store.state.file.previewStatus;
        },
    },
};
</script>

<style lang="less" scoped>
    .fileDownload-main{
        z-index: 2;
        position: absolute;
        right: 110px;
        bottom: 85px;

        .fileDownload-main-file{
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: @primary;
            position: absolute;

            .fileDownload-main-file-icon{
                font-size: 17px;
                color: #fff;
                margin: 9px 0 0 10px;
            }
        }

        .fileDownload-list{
            position: absolute;
            top: -350px;
            left: -270px;
            width: 300px;
            height: 380px;
            overflow-x: hidden;
            overflow-y: auto;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            background-color: #fff;
            cursor: pointer;

            .fileDownload-list-item{
                height: 55px;
                width: 100%;
                padding: 0 30px 0 20px;
                position: relative;
                &:nth-child(odd){
                    background-color: #fff;
                }
                &:nth-child(even){
                    background-color: #fafafa;
                }
                &:hover{
                    background-color: #f2f2f2;
                    .fileDownload-list-item-del{
                        display: inline-block;
                    }
                }

                .fileDownload-list-item-name{
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: 600;
                    color: #1d253e;
                }

                .fileDownload-list-item-content{
                    height: 25px;
                    line-height: 25px;
                    width: 100%;
                    display: flex;

                    .fileDownload-list-item-content-progress{
                        width: 160px;
                    }

                    .fileDownload-list-item-content-dec{
                        width: 88px;
                        font-size: 12px;
                        color: #5d6680;
                        padding: 0 0 0 5px;
                        overflow: hidden;
                    }
                }

                .fileDownload-list-item-del{
                    position: absolute;
                    right: 12px;
                    top: 18px;
                    font-size: 20px;
                    color: #666;
                    display: none;
                }
            }

            .fileDownload-list-none{
                margin: 115px 0 0 90px;
            }
        }

        .fileDownload-btn{
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            background-color: @primary;

            &:hover{
                background-color: @primaryHover;
            }

            .fileDownload-btn-icon{
                font-size: 26px;
                color: #fff;
                margin: 3px 0 0 0;
            }

            .fileDownload-btn-icon-ani{
                animation-name: jitter-in;
                animation-duration: 3s;
                animation-timing-function: linear;
                animation-iteration-count: 9999999999;
            }
            @keyframes jitter-in {
                0% {
                    transform: translateY(0px);
                }
                25% {
                    transform: translateY(5px);
                }
                50% {
                    transform: translateY(0px);
                }
                75% {
                    transform: translateY(-5px);
                }
                100% {
                    transform: translateY(0px);
                }
            }

            .fileDownload-btn-line{
                height: 6px;
                width: 30px;
                margin: -2px 0 0 15px;
                border-left: 2px solid #fff;
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                border-radius: 0px;
            }

            .fileDownload-btn-num{
                margin: 3px 0 0 19px;
                height: 18px;
                line-height: 18px;
                width: 23px;
                border-radius: 8px;
                font-size: 12px;
                text-align: center;
                background-color: #fff;
                color: #3860cb;
            }
        }
        .fileDownload-btn-selected{
            background-color: @primary;
        }

    }

    .ell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

</style>
